<template>
  <div class="table-box">
    <!-- 必须设置row-key="question_id"，否则拖动后的顺序会出错 -->
    <ProTable ref="proTable" title="用户列表" :columns="columns" :request-api="getTableList" :pagination="false">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button
          type="primary"
          :icon="CirclePlus"
          :disabled="!scope.isSelected"
          @click="openAddMyBankDrawer('加入我的题库', scope.selectedList)"
        >
          加入我的题库
        </el-button>
        <el-button type="primary" :icon="Edit" @click="openOptQuestionCollectionDrawer"> 集合操作 </el-button>
        <el-button type="primary" :icon="Edit" @click="openExportDrawer"> 导出到word </el-button>
      </template>
      <!--      &lt;!&ndash; 表格操作 &ndash;&gt;-->
      <!--      <template #operation="scope">-->
      <!--        <el-button type="primary" link :icon="Edit" @click="openOptQuestionCollectionDrawer"> 集合操作 </el-button>-->
      <!--      </template>-->
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <template #description="scope">
        <div v-html="scope.row.description"></div>
      </template>
    </ProTable>
    <AddQuestionsBatchDrawer ref="addQuestionsBatchDrawerRef" />
    <OptQuestionCollectionDrawer ref="optQuestionCollectionDrawerRef" />
    <ExportQuestionsBatchDrawer ref="exportQuestionsBatchDrawerRef" />
  </div>
</template>

<script setup lang="tsx" name="browse">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Question } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Delete, CirclePlus, Edit, EditPen, View } from "@element-plus/icons-vue";
import {
  exceptBankQuestionApi,
  getBankQuestionListApi,
  intersectBankQuestionApi,
  unionBankQuestionApi
} from "@/api/modules/bank_question";
import AddQuestionsBatchDrawer from "@/views/question/addQuestionsBatchDrawer.vue";
import OptQuestionCollectionDrawer from "@/views/question/optQuestionCollectionDrawer.vue";
import ExportQuestionsBatchDrawer from "@/views/question/exportQuestionsBatchDrawer.vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const paths = router.currentRoute.value.path.split("/");
let condition = ref<any>({});
condition.value = paths[paths.length - 1] as string;
condition.value = JSON.parse(decodeURI(condition.value));
// let bank_ids = condition.bank_ids;
let course_id = condition.value.course_id;
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// const questionList = ref<Question.QuestionInfo[]>([]);
const getTableList = async function () {
  // console.log("condition.value1:" + JSON.stringify(condition.value));
  if (condition.value.hasOwnProperty("type")) {
    let question_ids = [];
    for (let index = 0; index < (proTable.value?.tableData.length || 0); ++index) {
      question_ids.push(proTable.value?.tableData[index].question_id);
    }
    condition.value.question_ids = question_ids;
    // console.log("condition.value2:" + JSON.stringify(condition.value));
    if (condition.value.type == "except") {
      return await exceptBankQuestionApi(condition.value);
    } else if (condition.value.type == "union") {
      return await unionBankQuestionApi(condition.value);
    } else if (condition.value.type == "intersect") {
      return await intersectBankQuestionApi(condition.value);
    }
  } else {
    return await getBankQuestionListApi(condition.value);
  }
};

// 表格配置项
const columns: ColumnProps<Question.QuestionInfo>[] = [
  { type: "selection", fixed: "left" },
  // { type: "selection", fixed: "left", width: 70 },
  { prop: "chapter", label: "章节", width: 50 },
  { prop: "description", label: "题目说明", minWidth: 120 },
  // { prop: "stem", label: "题干", minWidth: 10 },
  // { prop: "analysis", label: "解析", minWidth: 10 },
  // { prop: "answer", label: "答案", minWidth: 10 },
  { prop: "type_name", label: "类型", width: 80 },
  { prop: "count", label: "分值", width: 40 },
  { prop: "operation", label: "操作", fixed: "right", minWidth: 50 }
];
// 打开 drawer(新增、查看、编辑)
const addQuestionsBatchDrawerRef = ref<InstanceType<typeof AddQuestionsBatchDrawer> | null>(null);
const optQuestionCollectionDrawerRef = ref<InstanceType<typeof OptQuestionCollectionDrawer> | null>(null);
const exportQuestionsBatchDrawerRef = ref<InstanceType<typeof ExportQuestionsBatchDrawer> | null>(null);

const openAddMyBankDrawer = (title: string, selectedList: any) => {
  const params = {
    title,
    isView: true,
    selectedList: selectedList,
    // bank_id: bank_id,
    course_id: course_id
  };
  addQuestionsBatchDrawerRef.value?.acceptParams(params);
};

const openOptQuestionCollectionDrawer = () => {
  const params = {
    title: "以当前的题目集合，与另一个题库做集合操作",
    isView: true,
    course_id: course_id,
    getTableList: proTable.value?.getTableList,
    condition: condition
  };
  optQuestionCollectionDrawerRef.value?.acceptParams(params);
};
const openExportDrawer = () => {
  const params = {
    title: "导出到word文件",
    isView: true,
    course_id: course_id,
    questionTableData: proTable.value?.tableData,
    condition: condition
  };
  exportQuestionsBatchDrawerRef.value?.acceptParams(params);
};
</script>
